<template>
	<view>
		<!-- <view class="banner">首页图</view> -->
		<view class="message-ul">
			<view class="message-li flex-row-start" v-for="item in articleList" @tap="goDetail(item.id)" :key="item.id">
				<view class="img">
					<image class="img" src="../../static/logo.png"></image>
				</view>
				<view>
					<view class="title">{{ item.title }}</view>
					<view class="time">{{ item.title }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				articleList: [],
				pageIndex: 1,
				total: 0,
			}
		},
		mounted() {
			this.getArticleList();
		},
		methods: {
			getArticleList() {
				console.log(1)
				let token = getApp().globalData.token;
				uni.request({
					url: getApp().globalData.url + '/blade-visual/appindex/list',
					header: {
						'blade-auth': "bearer " + token
					},
					method: "get",
					data: {
						current: this.pageIndex,
						size: 10
					},
					success: (res) => {
						// console.log(res);
						let code = res.data.code;
						if(code == 200) {
							let data = res.data.data
							this.articleList = data.records;
							this.total = data.total;
						} else {
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon: 'none'
							})
						}
					}
				});
			},
			goDetail(id) {
				console.log(id)
				if(id && id != '') {
					uni.navigateTo({
						url: './articleDetail?id=' + id
					})
				}
			}
		}
	}
</script>

<style scoped>
	.banner {
		width: 100%;
		height: 360rpx;
		line-height: 360rpx;
		text-align: center;
		background: #fff;
		margin-bottom: 20rpx;
	}
	
	.message-ul {
		width: 100%;
		font-size: 32rpx;
		background: #fff;
	}

	.message-li {
		width: calc(100% - 60rpx);
		height: 180rpx;
		margin: 0 30rpx;
		padding: 30rpx 0;
		border-bottom: 2rpx solid #e5e5e5;
	}

	.message-li:last-child {
		border-bottom: none;
	}

	.message-li .img {
		width: 160rpx;
		height: 120rpx;
		background: #333333;
		margin-right: 20rpx;
	}

	.message-li .title {
		height: 84rpx;
		line-height: 42rpx;
		font-size: 28rpx;
		color: #333;
		overflow: hidden;
	}

	.message-li .time {
		line-height: 42rpx;
		font-size: 24rpx;
		color: #999;
	}
</style>
